<template>
  <div class="map-content" v-loading="loadingLayers">
    <div id="map">
      <map-toolbar
        :filter-options="{
          excludeCommands: ['maplayers', 'removeHightlight', 'refreshMap', 'editMap']
        }"
        @command="handleToolbarCommand"
        ref="mapToolbar"
      />
    </div>
    <mapTooltipLeft></mapTooltipLeft>
    <mapTootipRight ref="mapTootipRight"></mapTootipRight>
    <projectDialog v-if="prjDialogVisible" @closePrjDialog="closePrjDialog" @selectProject="selectProject"></projectDialog>
    <weldboxDialog ref="weldboxDialog" v-if="weldboxDialogVisible" @closeWeldboxDialog="closeWeldboxDialog"></weldboxDialog>
    <pipeDialog v-if="pipeDialogVisible" @closePipeDialog="closePipeDialog"></pipeDialog>
    <exportDialog v-if="exportDialogVisible" ref="exportDialog" @closeExportDialog="closeExportDialog" @confirmExport="confirmExport"></exportDialog>
  </div>
</template>

<script>
import L from '@/libs/leaflet'
import { mapObj, mapInit, featureService, createFilter, createPointToLayer, createStyle, createAttributeFilter, createBoundsParams, highlightManager, createSelectionTool, filterFeaturesInCircle, getMapScale } from '@/widgets/mapUtils'
import '@/libs/iconfont/iconfont.js'
import '@/libs/svg-icon.js'
import projectDialog from './projectDialog.vue'
import weldboxDialog from './weldboxDialog.vue'
import pipeDialog from './pipeDialog.vue'
import exportDialog from './exportDialog.vue'
import mapTooltipLeft from './mapTootipLeft.vue'
import mapTootipRight from './mapTootipRight.vue'
import MapToolbar from './mapTools.vue'
import { addLeafletMeasureTool } from '@/widgets/measure'
import { get, debounce } from 'lodash'
import { getWeldinglineApi } from '@/deps/apis/weldboxApi'
import { createSwitchFrameApi } from '@/deps/apis/switchApi'
import { sessionStorage } from '@/deps/utils'
import { commitToDatasetApi } from '@/deps/api'
let allLayerData = []
let titleLayerData = []
let deviceLayerData = []
let featuresDatas = []
let dataFeatureGroup = null
let MARK_SIDS = []
let HAX_DATE_SID = {}
let preBounds = null
let nowSid = null
let measureTool = null
let nowLayerObj = null
let nowFeatureObj = null
let mapHighlightManager = null
export default {
  components: {
    mapTooltipLeft,
    mapTootipRight,
    MapToolbar,
    projectDialog,
    weldboxDialog,
    pipeDialog,
    exportDialog
  },
  props: {
    activeComponent: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      exportDialogVisible: false,
      pipeDialogVisible: false,
      prjDialogVisible: false,
      weldboxDialogVisible: false,
      selectionEnabled: false,
      selectionTip: null,
      loadingLayers: false,
      isEditOrDraw: false,
      isDeleteIng: false,
      _selectionTool: null // 使用下划线前缀存储实际的工具实例
    }
  },

  computed: {
    isShowMap() {
      return this.activeComponent === 'designIndex'
    },
    // 通过计算属性访问选择工具
    selectionTool() {
      return this._selectionTool
    }
  },
  async created() {
    this.loadingLayers = true
    this.$bus.$on('CHANGE_LAYER_CHECK', this.changeLayerCheck)
    this.$bus.$on('CLEAR_HIGH_BY_RIGHT', this.clearLayerHigh)
    mapHighlightManager = new highlightManager()
  },
  mounted() {
    mapInit()
    this.$refs.mapToolbar.setMapObj(mapObj)
    mapObj.pm.setLang('zh')
    dataFeatureGroup = L.featureGroup().addTo(mapObj)
    mapObj.on('moveend', this.queryMarks)
    mapObj.on('contextmenu', this.onContextMenu)
    measureTool = addLeafletMeasureTool(mapObj)
    dataFeatureGroup.pm.toggleEdit({
      draggable: true,
      snappable: true,
      snapDistance: 30
    })
    dataFeatureGroup.on('pm:snap', e => {
      console.log('snap')
      console.log(e)
    })
    dataFeatureGroup.on('pm:unsnap', e => {
      console.log('unsnap')
      console.log(e)
    })
    dataFeatureGroup.on('pm:dragstart', e => {
      console.error(e.layer.feature)
      e.layer.on(
        'pm:edit',
        debounce(data => {
          // layer has been edited
          const layerDatas = data.layer.toGeoJSON()
          this.editFeatureToBack(layerDatas).then(
            res => {
              console.error(data)
            },
            rej => {
              console.error(data)
            }
          )
          e.layer.off('pm:edit')
        }),
        300
      )
    })
    dataFeatureGroup.on('pm:markerdragstart', e => {
      console.error(e.layer.feature)
      e.layer.on(
        'pm:edit',
        debounce(data => {
          // layer has been edited
          const layerDatas = data.layer.toGeoJSON()
          this.editFeatureToBack(layerDatas).then(
            res => {
              console.error(data)
            },
            rej => {
              console.error(data)
            }
          )
          e.layer.off('pm:edit')
        }),
        300
      )
    })
    // 初始化框选工具
    this._selectionTool = createSelectionTool(mapObj, dataFeatureGroup)

    // 使用箭头函数确保 this 指向正确
    mapObj.on('feature:selected', e => {
      console.log('Feature selected:', e) // 添加调试日志
      const { feature, layer, selectionType } = e
      const layerObj = featuresDatas.find(item => item.LAYERNAME === feature.properties.LAYERNAME)
      // 高亮当前图层
      mapHighlightManager.highlight(layer, feature, layerObj)
    })

    // 监听选择完成事件
    mapObj.on('selection:complete', e => {
      console.log('Selection complete:', e.features, 'features selected') // 添加调试日志
    })

    // 监听地图点击事件
    mapObj.on('click', e => {
      console.log('mapObj clicked:', e)
      // 如果是框选工具启用状态，不清除高亮
      if (this.selectionEnabled) {
        return
      }
      // 确保点击的不是要素且不是框选操作
      if (!e.originalEvent.target.feature) {
        if (this.selectionTool) {
          this.selectionTool.selectedFeatures = []
        }
      }
    })

    // 监听框选取消事件
    mapObj.on('selection:cancel', () => {
      this.disableSelection()
    })
  },
  methods: {
    editFeatureToBack({ geometry, id, properties }) {
      return new Promise(function(resolve, reject) {
        const data = {
          editType: 'update',
          jsonString: JSON.stringify({
            geometry,
            id,
            properties: {},
            username: sessionStorage('userData').userName,
            datasetname: properties.LAYERNAME
          })
        }
        console.error(data)
        commitToDatasetApi(data).then(
          res => {
            resolve(res)
          },
          rej => {
            reject(rej)
          }
        )
      })
    },
    // 公共的确认框逻辑
    showConfirm(message, callback, catchFun) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(callback)
        .catch(() => {
          catchFun && catchFun()
        })
    },
    doDelete(e) {
      console.error(e)
      this.showConfirm(`确定删除选中的对象？`, () => {
        const data = {
          editType: 'delete',
          jsonString: JSON.stringify({
            type: 'Feature',
            datasetname: get(e.target, 'feature.properties.LAYERNAME', ''),
            username: get(sessionStorage('userData'), 'userName', ''),
            ids: [get(e.target, 'feature.properties.SMID', '')]
          })
        }
        commitToDatasetApi(data).then(res => {
          if (!res.success) this.$message.error('删除失败,请重试')
          this.$message.success('删除成功')
          dataFeatureGroup.removeLayer(e.target)
        })
      })
    },
    onContextMenu(e) {
      // 阻止默认右键菜单
      L.DomEvent.stop(e)
      L.DomEvent.preventDefault(e)
      this.isEditOrDraw = false
      this.isDeleteIng = false
      this.disableSelection()
    },
    closeAllToolAction() {
      dataFeatureGroup.pm.disable()
      measureTool.clearMeasurements()
      this.disableSelection()
    },
    async handleToolbarCommand(command) {
      this.isEditOrDraw = false
      this.closeAllToolAction()
      switch (command) {
        case 'importcad_room':
          if (this.exportDialogVisible) return
          this.exportDialogVisible = true
          break
        case 'openPrj':
          if (this.prjDialogVisible) return
          this.prjDialogVisible = true
          break
        case 'pipe':
          console.error(this.pipeDialogVisible, 'this.pipeDialogVisible')
          if (this.pipeDialogVisible) return
          this.pipeDialogVisible = true
          break
        case 'weldbox':
          if (this.weldboxDialogVisible) return
          const weldboxData = this.$refs.mapTootipRight.nowFeature
          const circle = L.circle([weldboxData.geometry.coordinates[1], weldboxData.geometry.coordinates[0]], {
            radius: nowLayerObj.RANGEDISTANCE, // 单位为米
            opacity: 1,
            fillOpacity: 1
          }).addTo(mapObj)
          // 根据圆形的范围计算边界
          const getParams = attributeFilter => {
            const p = {
              datasetNames: ['capture:C_PRO_OPTLINE'],
              spatialQueryMode: 'INTERSECT',
              fromIndex: 0,
              toIndex: 1000
            }
            if (attributeFilter) {
              p.queryParameter = { attributeFilter }
            } else {
              p.bounds = circle.getBounds()
            }
            var boundsParam = attributeFilter ? new window.SuperMap.GetFeaturesBySQLParameters(p) : new window.SuperMap.GetFeaturesByBoundsParameters(p)
            return boundsParam
          }
          let allLine = await new Promise(resolve => {
            featureService.getFeaturesByBounds(getParams(false), serviceResult => {
              resolve(serviceResult.result)
            })
          })
          let weldboxResult = await getWeldinglineApi({
            smid: weldboxData.properties.SMID
          })
          console.error(weldboxData, 'weldboxData')
          let beforeLines = []
          let afterLines = []
          let weldboxLines = get(weldboxResult, '[0].WELDINGLINE', '')
          if (weldboxLines) {
            weldboxLines = weldboxLines.split(';')
            beforeLines = get(weldboxLines, '[0]', '').split(',')
            afterLines = get(weldboxLines, '[1]', '').split(',')
          }
          let beforelinesInfos = await new Promise(resolve => {
            featureService.getFeaturesBySQL(getParams(`SMID IN (${beforeLines.join(',')})`), serviceResult => {
              resolve(serviceResult.result)
            })
          })
          let afterlinesInfos = await new Promise(resolve => {
            featureService.getFeaturesBySQL(getParams(`SMID IN (${afterLines.join(',')})`), serviceResult => {
              resolve(serviceResult.result)
            })
          })
          allLine = filterFeaturesInCircle(get(allLine, 'features.features', []), circle)
          beforelinesInfos = get(beforelinesInfos, 'features.features', [])
          afterlinesInfos = get(afterlinesInfos, 'features.features', [])
          circle.remove()
          this.weldboxDialogVisible = true
          this.$nextTick(() => {
            this.$refs.weldboxDialog.setWeldboxData({
              allLine,
              beforelinesInfos,
              afterlinesInfos,
              nowFeatureObj: weldboxData
            })
          })
          break
        case 'switchbox':
          const switchData = this.$refs.mapTootipRight.nowFeature
          if (!switchData) {
            this.$message.warning('请先选择交接箱')
            return
          }
          const isShelf = this.$refs.mapTootipRight.$data.originalData.c_Para_Shelf_ID
          if (!isShelf) {
            this.$message.warning('请先在右侧属性栏添加交接箱基本信息')
            return
          }
          const data = {
            userName: get(sessionStorage('userData'), 'userName', ''),
            baseinfoid: 1,
            smid: switchData.properties.SMID,
            rootid: switchData.properties.C_SYS_ROOT_ID
          }
          createSwitchFrameApi(data).then(res => {
            console.error(res, 'res')
            if (!res.success) {
              this.$message.warning(res.message || '生成交接箱边框线失败，请重试！')
              return
            }
            // 存储 featureData
            sessionStorage('switchbox_feature', switchData)
            this.$bus.$emit('switch-component', {
              name: 'switchbox',
              title: `交接箱设计(${switchData.properties.NAME})`,
              path: '/switchbox'
            })
          })
          break
        case 'roomPlateDesign':
          const roomPlateData = this.$refs.mapTootipRight.nowFeature
          if (!roomPlateData) {
            this.$message.warning('请先选择机房')
            return
          }
          // 存储 featureData
          sessionStorage('roomPlate_feature', roomPlateData)
          this.$bus.$emit('switch-component', {
            name: 'roomplate',
            title: `机房设计(${roomPlateData.properties.ROOMNAME})`,
            path: '/roomplate'
          })
          break
        case 'measureDistance':
          this.isEditOrDraw = true
          measureTool.measureDistance()
          break
        case 'measureArea':
          this.isEditOrDraw = true
          measureTool.measureArea()
          break
        case 'clearLayers':
          this.clearHighlAndDatas()
          this.$refs.mapTootipRight.clearAll()
          break
        case 'choseData':
          this.isEditOrDraw = true
          this.selectionEnabled = !this.selectionEnabled
          if (this.selectionEnabled) {
            console.log('Enabling selection tool')
            this._selectionTool.enable()
            // 显示持续提示
            this.selectionTip = this.$message({
              message: '框选已开启，右键关闭或在此关闭',
              type: 'info',
              duration: 0,
              showClose: true,
              onClose: () => {
                this.disableSelection()
              }
            })
          } else {
            this.disableSelection()
          }
          break
        case 'moveAction':
          dataFeatureGroup.pm.enableLayerDrag({
            allowSelfIntersection: false
          })
          this.isEditOrDraw = true
          break
        case 'editAction':
          dataFeatureGroup.pm.enable({
            allowSelfIntersection: false
          })
          this.isEditOrDraw = true
          break
        case 'deleteAction':
          this.isDeleteIng = true
          break
      }
    },
    closePipeDialog() {
      this.pipeDialogVisible = false
      if (nowFeatureObj.properties.FEATURENAME === '管道') {
        this.$bus.$emit('CHANGE_LAYER_INFO', nowFeatureObj)
      }
    },
    closeExportDialog() {
      this.exportDialogVisible = false
    },
    confirmExport() {
      this.exportDialogVisible = false
    },
    closePrjDialog() {
      this.prjDialogVisible = false
    },

    closeWeldboxDialog() {
      this.weldboxDialogVisible = false
    },

    selectProject(data) {
      sessionStorage('projectInfo', data)
      this.closePrjDialog()
      this.$bus.$emit('SELECT_PROJECT', data)
      console.log('Project selected:', data)
    },

    resetDatas() {
      titleLayerData = []
      deviceLayerData = []
      allLayerData = []
      featuresDatas = []
      preBounds = null
      dataFeatureGroup.clearLayers()
    },

    changeLayerCheck(layerDatas) {
      if (!this.isShowMap) return
      this.resetDatas()
      layerDatas.forEach(element => {
        if (element.child.every(child => `${child.LAYERTYPE}` === `3`)) {
          titleLayerData.push(...element.child)
        } else {
          deviceLayerData.push(...element.child)
        }
        allLayerData.push(...element.child)
      })
      featuresDatas = allLayerData.filter(element => element.LAYERTYPE === 0 && element.isVisible)
      preBounds = mapObj.getBounds()
      this.loadingLayers = true
      this.layerOnMapByFeatures()
    },
    clearLayerHigh(layerId) {
      mapHighlightManager && mapHighlightManager.clearHighlight(layerId)
    },
    clearHighlAndDatas() {
      nowLayerObj = null
      nowFeatureObj = null
      nowSid = null
      mapHighlightManager && mapHighlightManager.clearAllHighlights()
    },
    async layerOnMapByFeatures() {
      const oldHighSIMS = {}
      const onEachFeature = (feature, layer) => {
        // Add SMID to tracking array
        const SMID = get(feature, 'properties.SMID', '')
        if (SMID) {
          MARK_SIDS.push(`${SMID}`)
        }
        if (mapHighlightManager.highlightedLayerDatas.includes(`${SMID}`)) {
          if (!oldHighSIMS[SMID]) {
            oldHighSIMS[SMID] = SMID
            // 先清除原有高亮再重新应用
            mapHighlightManager.clearHighlight(SMID)
            mapHighlightManager.highlight(layer, feature)
          }
        }
        layer.on('click', e => {
          console.log('Feature clicked:', e)
          if (!this.isEditOrDraw && !this.isDeleteIng) {
            e.originalEvent.stopPropagation()
            const feature = get(e, 'target.feature', '')
            const SID = get(feature, 'properties.SMID', '')
            const isCheck = get(feature, 'properties.isCheck', '')
            if (!isCheck) {
              return
            }
            const layerObj = featuresDatas.find(item => item.LAYERNAME === feature.properties.LAYERNAME)
            nowLayerObj = layerObj
            nowFeatureObj = feature
            nowSid = SID
            mapHighlightManager.highlight(layer, feature, layerObj)
            this.$bus.$emit('CHANGE_LAYER_INFO', feature)
          }
          if (this.isDeleteIng) {
            this.doDelete(e)
          }
        })
        layer.on('contextmenu', e => {
          console.error(this.isEditOrDraw)
          console.error(this.isDeleteIng)
          console.error(e)
          const feature = get(e, 'target.feature', '')
          this.$message && this.$message.info(`当前右键的对象:${feature.properties.SMID}`)
        })
        if (!dataFeatureGroup.hasLayer(layer)) {
          dataFeatureGroup.addLayer(layer)
        }
      }
      const curZoom = mapObj.getZoom()
      const mapScale = getMapScale(mapObj)
      for (let index = 0; index < featuresDatas.length; index++) {
        const layerObj = featuresDatas[index]
        const attributeFilter = createAttributeFilter(layerObj, curZoom)
        const params = createBoundsParams(layerObj, mapObj.getBounds(), attributeFilter)
        const result = await new Promise(resolve => {
          featureService.getFeaturesByBounds(params, serviceResult => {
            resolve(serviceResult.result)
          })
        })
        if (!result || !result.features) {
          console.warn('No features found for layer:', layerObj.LAYERNAME)
          continue
        }
        const style = createStyle(layerObj)
        let LAYER_SIZES = {}
        const size = layerObj.FEATURESIZE || 20
        // 25 需要改成 sessionStorage('sysMapInfo').mapScales
        let scalesArr = get(sessionStorage('sysMapInfo'), '[0].mapScales', '').split(',')
        for (var i = 0; i < (scalesArr[1] || 25); i++) {
          LAYER_SIZES[i] = (size * Math.pow(2, i)) / 1000000
        }
        const geoJsonLayer = L.geoJSON(result.features, {
          onEachFeature,
          markersInheritOptions: true,
          interactive: layerObj.isCheck,
          filter: feature => {
            const shouldInclude = createFilter(MARK_SIDS, HAX_DATE_SID, layerObj)(feature)
            return shouldInclude
          },
          pointToLayer: createPointToLayer(layerObj, false, curZoom, LAYER_SIZES),
          style: feature => {
            const computedStyle = style
            return computedStyle
          }
        })
        // Ensure the layer is actually added to the map
        if (!mapObj.hasLayer(geoJsonLayer)) {
          geoJsonLayer.addTo(mapObj)
          console.log('Added layer to map:', layerObj.LAYERNAME)
        }
      }
      this.queryEnded()
    },
    queryEnded() {
      this.$nextTick(() => {
        dataFeatureGroup.eachLayer(l => {
          const SMID = get(l, 'feature.properties.SMID', null)
          if (!MARK_SIDS.includes(`${SMID}`)) {
            dataFeatureGroup.removeLayer(l)
            return
          }
        })
        this.loadingLayers = false
      })
    },
    disableSelection() {
      if (!this.selectionEnabled) return // 防止重复调用
      console.log('Disabling selection tool')
      this.selectionEnabled = false
      this._selectionTool.disable(false) // 传入 false 表示不清除选择
      // 关闭提示
      if (this.selectionTip) {
        this.selectionTip.close()
        this.selectionTip = null
      }
    },
    // 获取要素的边界范围
    getBounds(coordinates) {
      // 这里需要根据实际坐标系统来计算边界
      // 示例实现：
      const lats = coordinates.map(coord => coord[1])
      const lngs = coordinates.map(coord => coord[0])
      return [
        [Math.min(...lats), Math.min(...lngs)],
        [Math.max(...lats), Math.max(...lngs)]
      ]
    },
    queryMarks: debounce(async function() {
      if (!this.isShowMap || this.isEditOrDraw || this.isDeleteIng) return
      // Save currently highlighted features
      const highlightedFeatures = [...this.selectionTool.selectedFeatures]
      const currentSid = nowSid
      // Clear tracking arrays but keep a copy of old IDs
      const oldMarkSids = [...MARK_SIDS]
      MARK_SIDS = []
      await this.layerOnMapByFeatures()
      // Debug logging for feature tracking
      this.$nextTick(() => {
        if (highlightedFeatures.length > 0) {
          this.selectionTool.selectedFeatures = highlightedFeatures
        }
        nowSid = currentSid
      })
    }, 600)
  },
  beforeDestroy() {
    this.$bus.$off('CHANGE_LAYER_CHECK', this.changeLayerCheck)
    this.$bus.$off('CLEAR_HIGH_BY_RIGHT', this.clearLayerHigh)
    measureTool && measureTool.destroy()
    nowSid = null
    mapHighlightManager = null
    if (this._selectionTool) {
      this._selectionTool.disable()
    }
    mapObj.off('feature:selected')
  }
}
</script>
<style lang="scss">
.map-content {
  width: 100%;
  height: 100%;
  .click-false {
    cursor: grab;
  }
}
// 主题变量
:root,
.theme-white {
  --measure-primary: #2d8cf0;
  --measure-bg: #fff;
  --measure-text: #1e2121;
  --measure-border: #ebeef5;
  --measure-hover: #f5f7fa;
}

.theme-black {
  --measure-primary: #2d8cf0;
  --measure-bg: #1e2121;
  --measure-text: #f5f7fa;
  --measure-border: #444;
  --measure-hover: #0b0c0c;
}

// 测量标记
.measure-marker {
  background: var(--measure-primary);
  color: white;
  border-radius: 50%;
  border: 2px solid var(--measure-bg);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  div {
    margin-top: -1px;
  }
}

// 临时测量线
.measure-temp-line {
  stroke: var(--measure-primary);
  stroke-width: 2;
  stroke-dasharray: 5, 5;
  fill: none;
}

// 永久测量线
.measure-permanent-line {
  stroke: var(--measure-primary);
  stroke-width: 3;
  fill: none;
}

// 临时测量面
.measure-temp-polygon {
  stroke: var(--measure-primary);
  stroke-width: 2;
  stroke-dasharray: 5, 5;
  fill: var(--measure-primary);
  fill-opacity: 0.2;
}

// 永久测量面
.measure-permanent-polygon {
  stroke: var(--measure-primary);
  stroke-width: 3;
  fill: var(--measure-primary);
  fill-opacity: 0.4;
}

// 动态Popup（跟随鼠标）
.measure-dynamic-popup {
  .leaflet-popup-content-wrapper {
    background: var(--measure-bg);
    color: var(--measure-text);
    border: 1px solid var(--measure-border);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    padding: 5px 10px;
  }

  .leaflet-popup-tip {
    background: var(--measure-bg);
  }
}

// 结果Popup
.measure-result-popup {
  .leaflet-popup-content-wrapper {
    background: var(--measure-bg);
    color: var(--measure-text);
    border: 1px solid var(--measure-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
  }

  .leaflet-popup-tip {
    background: var(--measure-bg);
  }

  .leaflet-popup-close-button {
    color: var(--measure-text);

    &:hover {
      color: var(--measure-primary);
    }
  }
}

// 消息Popup
.measure-message-popup {
  .leaflet-popup-content-wrapper {
    background: var(--measure-hover);
    color: var(--measure-text);
    text-align: center;
    padding: 8px 12px;
  }

  .leaflet-popup-tip {
    background: var(--measure-hover);
  }
}
// 错误提示样式
.measure-error-popup {
  .leaflet-popup-content-wrapper {
    background: #ff4d4f;
    color: white;
    font-weight: bold;
  }

  .leaflet-popup-tip {
    background: #ff4d4f;
  }
}
.map-tootip {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 20%;
  height: 560px;
  z-index: 999;
  &.map-tootip-left-show,
  &.map-tootip-right-show {
    .content {
      padding: 16px;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: auto;
    }
  }
  .bg {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    opacity: 0.8;
    background: var(--bg-color);
    position: absolute;
  }
  .content {
    position: relative;
    color: var(--text-color);
  }
  &.map-tootip-left {
    left: -20%;
    &.map-tootip-left-show {
      left: 8px;
    }
    .arrow-btn {
      right: -40px;
    }
  }
  &.map-tootip-right {
    right: -25%;
    width: 25%;
    &.map-tootip-right-show {
      right: 8px;
    }
    .arrow-btn {
      left: -40px;
    }
  }
  .arrow-btn {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1000;
    font-size: 36px;
    color: var(--color-primary);
    cursor: pointer;
    &:hover {
      i {
        transform: scale(1.1);
      }
    }
  }
}
</style>
